<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>

            a {
                display: inline-block;
                width: 120px;
                height: 58px;
                text-align: center;
                font-size: 16px;
                line-height: 50px;
                color: white;
                text-decoration: none;
            }

            .nav1:link{
                background-image: url('images/bg1.png');
            }
            .nav1:hover{
                background-image: url('images/bg5.png');
            }

            .nav2:link{
                background-image: url('images/bg2.png');
            }
            .nav2:hover{
                background-image: url('images/bg6.png');
            }

            .nav3:link{
                background-image: url('images/bg3.png');
            }
            .nav3:hover{
                background-image: url('images/bg7.png');
            }

            .nav4:link{
                background-image: url('images/bg4.png');
            }
            .nav4:hover{
                background-image: url('images/bg5.png');
            }
        </style>
    </head>
    <body>

        <div>

            <a href="#" class="nav1">
                五彩导航
            </a>
            <a href="#" class="nav2">
                五彩导航
            </a>
            <a href="#" class="nav3">
                五彩导航
            </a>
            <a href="#" class="nav4">
                五彩导航
            </a>

        </div>

    </body>
</html>